<template>
    <div class="addtime">
        <!-- 顶部栏 -->
        <div class="add_header">
            <p class="add_tltle">新增事件</p>
        </div>

        <!-- 记录事件 -->
        <div class="my_list">

            <div class="head_tit inp">
                <span class="iconfont icon-xingqiu "></span>
                <input ref="inp" type="text" placeholder="要记录什么呢">
            </div>
            <!-- 时间 -->
            <div class="time">
                <div class="head_tit">
                    <span class="iconfont icon-rili "></span>
                    <div class="txt" @click="show = true">
                        目标日
                        <div class="now_time">{{showDate}}</div>
                    </div>
                </div>
            </div>

            <!-- 首页显示 -->
            <div class="switch_box">
                <div class="head_tit">
                    <span class="iconfont icon-rili "></span>
                    <div class="txt">在首页显示</div>
                    <van-switch v-model="checked" size="20px" inactive-color="#dcdee0" />
                </div>
            </div>
        </div>
        <!-- <van-calendar v-model="show" @confirm="onConfirm" /> -->
        <van-calendar v-model="show" :min-date="minDate" :max-date="maxDate" @confirm="onConfirm" />
        <van-button type="info" size="large" @click="saveNote">保存</van-button>
        <!-- <button @click="foo">测试函数</button> -->
    </div>
</template>

<script>
import { Dialog } from 'vant';
export default {
    name: 'AddTime',
    data() {
        return {
            show: false,
            minDate: new Date(2000, 0, 1),
            maxDate: new Date(2090, 0, 31),
            date: "2022-10-15",
            showDate: '',
            days: 0,
            checked: false
        }
    },
    methods: {
        // 获取时间
        getToDay() {
            let nowDate = new Date()
            let date = {
                year: nowDate.getFullYear(),
                month: nowDate.getMonth() + 1,
                date: nowDate.getDate()
            }
            let week = nowDate.getDay();
            let weeks = ["日", "一", "二", "三", "四", "五", "六"];
            let getWeek = "星期" + weeks[week];
            this.showDate = date.year + '-' + date.month + '-' + date.date + ' ' + getWeek
            // console.log(showDate);
        },
        onConfirm(date) {
            this.show = false;
            let week = date.getDay()
            let weeks = ["日", "一", "二", "三", "四", "五", "六"];
            let getWeek = "星期" + weeks[week];
            this.showDate = `${date.getFullYear()}-${date.getMonth() + 1 >= 10 ? date.getMonth() + 1 : '0' + (date.getMonth() + 1)}-${date.getDate() > 10 ? date.getDate() : '0' + date.getDate()} ${getWeek}`
            this.date = `${date.getFullYear()}-${date.getMonth() + 1 > 10 ? date.getMonth() + 1 : '0' + (date.getMonth() + 1)}-${date.getDate() > 10 ? date.getDate() : '0' + date.getDate()}`
            // console.log(this.showDate);
        },
        saveNote() {
            let inptxt = this.$refs.inp.value
            if (inptxt.length == 0) {
                Dialog({ message: '输入框不能为空(•́へ•́╬)' });
                return
            }
            // 计算相差天数
            let today = new Date();
            let end = new Date(this.date);
            if (end > today) {
                this.days = parseInt(Math.abs(end - today) / 1000 / 60 / 60 / 24);
            } else {
                this.days = parseInt(Math.abs(end - today) / 1000 / 60 / 60 / 24); // 如果不限制对比时间和当前时间大小可以不用if
            }
            let info = {
                txt: this.$refs.inp.value,
                time: this.showDate,
                isShow: this.checked,
                days: this.days,
                date: this.showDate
            }
            let close = false
            this.$emit('item-info', info, close)

            // 清空输入框
            this.$refs.inp.value = ''
            // console.log(info);
        },
        foo() {
            this.getToDay()
            
        },
    },
    created() {
        this.getToDay()
    }
}
</script>

<style lang="scss" scoped>
@import "@/static//common/base.scss";
@import "@/assets/iconfont/iconfont.css";

.addtime {
    .add_header {
        width: 100%;
        height: 80px;
        background-color: $bgColor;
        display: flex;
        align-items: center;

        .add_tltle {
            color: rgb(255, 255, 255);
            font-weight: 600;
            font-size: 22px;
            margin-left: 50px;
        }

        .add_save {
            color: #fff;
            font-size: 18px;
            width: 40px;
            height: 40px;
            line-height: 40px;
            margin-left: 80px;
        }
    }

    .my_list {
        .head_tit {
            display: flex;
            // align-items: center;
            padding: 10px;
            position: relative;

            .iconfont {
                font-size: 22px;
            }

            .txt {
                font-size: 18px;
                color: rgb(153, 149, 149);
                margin-left: 10px;
            }
        }

        .inp {
            padding: 15px 0;
            border-bottom: 1px solid #ccc;

            .iconfont {
                font-size: 26px;
                color: rgb(122, 122, 122);
                font-weight: 600;
                margin-left: 10px;
            }

            input {
                font-size: 18px;
                flex-grow: 1;
                margin-left: 10px;
                border-bottom: 2px solid $bgColor;
                padding: 2px;
                caret-color: $color;
            }

            input::-webkit-input-placeholder {
                color: rgb(186, 185, 185);
            }

            input::-moz-placeholder {
                /* Mozilla Firefox 19+ */
                color: rgb(186, 185, 185);
            }

            input:-moz-placeholder {
                /* Mozilla Firefox 4 to 18 */
                color: rgb(186, 185, 185);
            }

            input:-ms-input-placeholder {
                /* Internet Explorer 10-11 */
                color: rgb(186, 185, 185);
            }
        }

        .time {
            .now_time {
                font-size: 18px;
                margin-top: 20px;
                color: $color;
            }
        }

        .swtich_box {}
    }
}
</style>